*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #0f001b;
}
body {
  /* background-color: rgb(255, 255, 255); */
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  /* transition: background 1s ease; */
  /* background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='70' height='8' patternTransform='scale(1) rotate(90)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2c9.272 0 14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6 44.272-6 49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14c-9.272 0-14.215 5.258-18.7 10.339C11.918 1.306 8.353 6-.02 6.002'  stroke-width='0.5' stroke='%23fbf087ff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-33,-7)' fill='url(%23a)'/></svg>") */
}
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
}
/* #dm-btn {

  position: fixed;
  left: 40px;
} */

.dark-mode {
  background-color: black;
}
/*
html {
  scroll-behavior: smooth;
}*/
/* body:has(.prev_img:hover)
{background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='70' height='8' patternTransform='scale(1) rotate(90)'><rect x='0' y='0' width='100%' height='100%' fill='%2305001dff'/><path d='M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2c9.272 0 14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6 44.272-6 49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14c-9.272 0-14.215 5.258-18.7 10.339C11.918 1.306 8.353 6-.02 6.002'  stroke-width='0.5' stroke='%2300158dff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-33,-7)' fill='url(%23a)'/></svg>")}
{background: #000000} */


a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: #3e00b0;
}
body, html {
  width: 100vw;
}


.img-zoom-container {
  display: grid;
  margin-left: auto;
  margin-right: auto;

}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){  .img-zoom-container { display: none;}}

.head_box {
  text-align: center;
  font-weight: 100;
  font-stretch: ultra-expanded;
  margin-bottom: 150px;
  font-size: 1.6em;
}
@media only screen and (max-width: 955px) {
  .head_box {
    font-size: 1.2em;
    text-align: center;
  }
  .flex-container {
    flex-direction: column;
  }
}
.flex-container {
  display: flex;
  justify-content: space-evenly;
  justify-content: center;
  margin-bottom: 25vh;
  font-size: 25px;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: 900;
  text-shadow: 7px 7px 7px #A42995;

}

.flex-container > div {
  background-color: transparent;
  width: flex;
  max-width: 100vw;
  margin: 4vw;
  text-align: center;
}
.socButt {
  height: 30px;
  width: 30px;
  display: inline;
  object-fit: contain;
  
}

/* .socButt:hover {
  display:flex
} */
/* .flex-containerb > div {
  background-color: rgb(255, 255, 255);
  width: flex;
  max-width: 10vw;
  margin: 4vw;
  text-align: center;
  }*/



@media only screen and (max-width: 1100px) {
  .about_text {
    display: block;
    text-align: start;
    font-weight: 200;
    margin-left: 10vw;
    margin-right: 10vw;
    margin-top: 15vh;
    margin-bottom: 15vh;
  }
}
@media only screen and (min-width: 1101px) {
  .about_text {
    display: block;
    text-align: start;
    font-weight: 200;
    margin-left: 20vw;
    margin-right: 20vw;
    margin-top: 15vh;
    margin-bottom: 15vh;
  }
}

.viewTop {
  margin-left: auto;
  margin-right: auto;
  max-width: 90vw;
  color: #4291ff;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding-bottom: 10vh;
  text-align: center;
}

div#home_box {
  background-color: transparent;
  padding: 10px;
}
.prev_box {
  margin-bottom: 205px;
  font-weight: 200;
}

.prev_img {
  display: block;
  padding: 5px 15px 0px;
  margin-left: auto;
  margin-right: auto;
}

.prev_img img:hoover {
  #bg-canvas {
    opacity: 0;
  }
}

.portrait {
  max-height: 87vh;
  max-width: 70vw;
}

.landscape {
  max-height: 60vh;
  max-width: 80vw;
}

.prev_desc {
  display: block;
  padding-left: 13vw;
  padding-right: 13vw;
  text-align: center;
  font-size: .8em;
  margin: 2px;
  margin-top: .8em;

}

.prev_desc > .title {  font-weight: 400; }
.prev_desc > .dimension,
.prev_desc > .year,
.prev_desc > .artist{  font-weight: 200; }

.vita {
  margin-left: 25px;
  font-weight: 200;
  margin-bottom: 145px;
}

.impressum{
  font-weight: 200;
}

.switch {
  text-align: center;
  margin: 10rem;
}
.dm-btn {
  color: rgb(91, 91, 91);
  background-color: transparent;
  cursor: pointer;
  border: 0px;
  border-radius: 4px;
  padding: 0.25em 0.5em;
  /* box-shadow:  0px 0px 15px #ff04e2; */
  /* left: 40px; */
  font-weight: 700;
}
.dm-btn a ,.dm-btn a:hover{
  color: inherit;
  
}

.gridi {
  /* padding: 13px; */
   display: grid;
   grid-template-columns: auto auto auto;
   grid-auto-flow: row; /* or 'row', 'row dense', 'column dense' */
   gap: 70px;
   justify-items:center;
   align-items: center;
   
 }

.gridi .prev_img {
  /* padding-top: 10px;
  padding-bottom: 10px; */
  border-radius: 5%;
}
.gridi .portrait {
  max-height: 27vh;
}
.gridi .landscape {
  max-width: 32vh;
}

@media only screen and (min-width: 900px) {
  .gridi {
    margin: 4vw 20vw 20vw 20vw;
  }
}

@media only screen and (max-width: 900px) {
  .gridi {
    width: 92vw;
    margin: 4vw;
    grid-template-columns: auto auto;
    grid-auto-flow: row;
    gap: 8vw;
  }
}



#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: opacity 0.5s ease;
  opacity: 0; /* Start hidden */
}
#bg-canLanding {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: opacity 0.5s ease;

}

/*______________MUGH______________*/
img { content-visibility: auto;}

.mugh_box {
  text-align: center;
  font-weight: 500;
}

.MUGH {
  font-weight:200;
  text-align: center;
  padding: 30px;
  font-size: 5em;
}
.mugh_img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 450px;
  padding: 0;
}
.mugh_img2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 77vw;
  max-height: 33vh;
  padding: 1vw;
}

.mugh_desc {
  font-weight:200;
  text-align: center;
  font-size: 0.7em;
}

.mugh_desc > .mugh_titel {
  font-weight: 500;
}

.mugh_desc > .mugh_text,
.mugh_desc > .namen_links {
  font-weight: 200;
}

ul {
  margin-left: 23vw;
  font-size: 0.7em;
  list-style-type: none;
  padding: 3vh;
}

a img { display:none; }
a:hover img {
  display:block;
  margin-left: auto;
  margin-right: auto;
  max-height: 42vh;
  max-width: 55vw;
 }

 /*______________HONEY______________*/

 .honeyheader > h1{
  text-align: center;
  font-weight: 500;
  font-stretch: ultra-expanded;
  color: #daa700;
  margin-bottom: 150px;
  margin-top: 100px;
  font-size: 1.6em;
 }
 .honeyheader > h2 {
  text-align: center;
  margin: 15px;
  font-size: 1.6em;
 }
 .hooney {
  display:block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100vw;

 }
 /*____________DURCH_UND_DURCH______________*/

 .durchheader > h1{
  text-align: center;
  font-weight: 500;
  font-stretch: ultra-expanded;
  color: #daa700;
  margin-bottom: 150px;
  margin-top: 100px;
  font-size: 1.6em;
 }
 .durchheader > h2 {
  text-align: center;
  margin: 15px;
  font-size: 1.6em;
 }
 .durchheader > a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: #ff9100ec;
}